<template>
  <view>
    <uni-popup ref="feeDescRef" type="center" zindex>
      <view class="box-con padding">
        <view class="top-title margin-bottom">
          <view class="modalTitle pad_cl">项目收费说明</view>
          <view class="close-btn" @click="close"><text class="cuIcon-close text-lg closBtn"></text></view>
        </view>
        <view class="flex justify-between margin-bottom">
          <view class="text-c6">基础收费</view>
          <view class="text-c6 text-bold">￥99</view>
        </view>
        <view class="flex justify-between margin-bottom">
          <view class="text-c6">等级加收费</view>
          <view>￥0</view>
        </view>
        <view class="flex justify-between margin-bottom">
          <view class="text-c6">小计</view>
          <view class="flex flex-direction align-end">
            <text class="text-c6 text-bold">￥99</text>
            <text class="text-c9 text-xs">(小程序价)</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  import { onShow,onLoad,onUnload} from '@dcloudio/uni-app';
  const feeDescRef = ref(null)
  
  onShow(()=>{
    uni.setStorageSync('key','905899741')
  })
  onUnload(()=>{ //需求离开页面的时候删除
    uni.removeStorageSync('key')
  })
  
  const  open = () => {
    feeDescRef.value.open()
  }
  
  const close  = () => {
    feeDescRef.value.close()
  }
  
  defineExpose({ open, close })
  
</script>

<style lang="scss" scoped>
  .box-con {
    background-color: #fff;
    border-radius: 16rpx;
    padding-bottom: 40rpx;
    flex-shrink: 0;
    width: 680rpx;
    max-height: 96vh;
    position: relative;
    .modalTitle {
      font-size: 32rpx;
      font-weight: bold;
    }
    .close-btn {
      position: absolute;
      right: 30rpx;
      top: 30rpx;
    }
  }
</style>